import React, { useState, useEffect } from 'react'
import { Tabs, Card, Typography, Space, Button, Table, DatePicker, Form, Input } from "antd"
import { PageContainer } from '@ant-design/pro-layout';
import { useIntl, history } from 'umi';
import SearchActivity from './components/SearchActivity';
import "./index.less"
import ActivityList from './components/ActivityList/ActivityList';
import { PlusOutlined } from '@ant-design/icons'
import CreateAdd from './CreateAdd';
import { activityList } from "@/services/login"
const { Text, Title } = Typography;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
function Activity() {
    const [loading, setLoading] = useState(true);
    const [data, setdata] = useState([])
    const [total, settotal] = useState()
    const [curPage, setCurPage] = useState(1);   //当前页数
    const [pageSize, setPageSize] = useState(10);  //每页数量
    const [tabs, setTabs] = useState([
        { key: 0, tab: "全部" },
        { key: 1, tab: "待审核" },
        { key: 2, tab: "进行中" },
        { key: 3, tab: "未开始" },
        { key: 4, tab: "已驳回" },
        { key: 5, tab: "已结束" },
        { key: 6, tab: "草稿箱" },
    ])
    const callback = (key) => {
        setLoading(true)
        if (key == 0) {
            activityList(
                {
                    // activityStatus: [1, 2, 3, 4, 5],
                    // isDraft:1,
                    page: curPage,
                    pageSize: pageSize,
                }
            ).then(ok => {
                setdata(ok.data.rows)
                setLoading(false)
            }).catch(err => {
                console.log(err)
            })
        }
        else {
            activityList(
                {
                    activityStatus: [Number(key)],
                }
            ).then(ok => {
                setdata(ok.data.rows)
                setLoading(false)

            }).catch(err => {
                console.log(err)
            })
        }
        if (key == 6) {
            activityList(
                {
                    isDraft: 1
                }
            ).then(ok => {
                setdata(ok.data.rows)
                setLoading(false)

            }).catch(err => {
                console.log(err)
            })
        }

    }
    const handleClick = () => {
        history.push("/activity/createadd")
    }

    // 创建活动的列表
    useEffect(() => {
        setLoading(true)
        async function getdata() {
            const { code, data: { rows, total } } = await activityList({
                page: curPage,
                pageSize: pageSize,
            })
            setdata(rows)
            settotal(total)
            if (data.length >= 0) {
                setLoading(false)
            }
        }
        getdata()
    }, [curPage])
    const pageonChange = (page, pageSize) => {
        console.log(page, "========================107")
        setCurPage(page);
        // requestData(page);
        setPageSize(pageSize);
    }


    const [form] = Form.useForm()
    const { resetFields, getFieldValue } = form;
    console.log(form)
    const onFinish = (values) => {
        let time = [];
        Array.isArray(getFieldValue('time')) &&
            getFieldValue('time').forEach((element) => {
                time.push(element.format('YYYY-MM-DD'));
            });
        console.log('onOk: ', time);
        setLoading(true)
        activityList(
            {   
                page: curPage,
                pageSize,
                activityName: values.name,
                queryEndDate: time[0],
                queryStartDate: time[1]
            }
        ).then(ok => {
            console.log(ok)
            setdata(ok.data.rows)
            setLoading(false)

        }).catch(err => {
            console.log(err)
        })
    };
    const onReset = () => {
        form.resetFields();
    };
    const onOk = (value) => {

        // let time = [];
        // Array.isArray(getFieldValue('time')) &&
        //     getFieldValue('time').forEach((element) => {
        //         time.push(element.format('YYYY-MM-DD'));
        //     });
        // console.log('onOk: ', time);
        // activityList(
        //     {   
        //         page: curPage,
        //         pageSize,
        //         activityName: value.name,
        //         queryEndDate: time[0],
        //         queryStartDate: time[1]
        //     }
        // ).then(ok => {
        //     console.log(ok)
        //     // setdata(ok.data.rows)
        //     // setLoading(false)

        // }).catch(err => {
        //     console.log(err)
        // })

    }
    const columns = [
        {
            title: '活动名称',
            dataIndex: 'activityName',
            key: 'activityName',
        },
        {
            title: '创建人',
            dataIndex: 'creator',
            key: 'creator',
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreated',
            key: 'gmtCreated',
        },
        {
            title: '活动时间',
            dataIndex: 'gmtCreated',
            key: 'gmtCreated',
            render(item, i) {
                return `${item}-${i.endDate}`
            }
        },
        {
            title: '状态',
            dataIndex: 'activityStatus',
            key: 'activityStatus',
            render: (item, i) => {
                console.log("159=============", i)
                if (i.isDraft == true) {
                    return <Text type="success">草稿箱</Text>
                }
                switch (i.activityStatus) {
                    case 1:
                        return <Text type="danger">待审核</Text>
                    case 2:
                        return <Text type="secondary">进行中</Text>
                    case 3:
                        return <Text type="success">未开始</Text>
                    case 4:
                        return <Text type="danger">已驳回</Text>
                    case 5:
                        return <Text type="warning">已结束</Text>
                    case 6:
                        return <Text type="success">已关闭</Text>
                }
            }
        },
        {
            title: '操作',
            key: 'operation',
            render: (text, record, index) => {
                if (record.isDraft == 1) {
                    return (
                        <Space size="middle">
                            <a>删除</a>
                            <a>编辑</a>
                        </Space>
                    )
                }
                else {
                    return (
                        <Space size="middle">
                            <a onClick={() => { history.push("/activity/details") }}>详情</a>
                        </Space>
                    )
                }
            }
        },
    ];


    return (
        <div>
            <PageContainer title={false} >
                <Card className="Activity-card">
                    <Space>
                        <Tabs onChange={callback} >
                            {
                                tabs.map((item, index) => {
                                    console.log(index)
                                    return (
                                        <TabPane tab={item.tab} key={item.key} >
                                            {/* <SearchActivity /> */}
                                            <Form layout="inline" form={form} onFinish={onFinish}>
                                                <Form.Item
                                                    name="name"
                                                    label="活动名称：">
                                                    <Input placeholder='请输入' className='box-leftInput' style={{ width: "356px", borderRadius: "5px" }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name="time"
                                                    label="创建时间："
                                                >
                                                    <RangePicker
                                                        style={{ width: "278px", borderRadius: "5px" }}
                                                        onOk={onOk}
                                                        className='box-leftInput'
                                                    />
                                                </Form.Item>
                                                <Form.Item>
                                                    <Button size="middle" className='box-ButtonCancel' onClick={onReset}>取消</Button>
                                                    <Button className='box-ButtonCancel ok-buttonColoor' htmlType="submit">确定</Button>
                                                </Form.Item>
                                            </Form>
                                            <Button className='createBut' type="primary" icon={<PlusOutlined />} onClick={handleClick} >创建活动</Button>
                                            <Table
                                            style={{width:"99%"}}
                                                className="ActivityList-table"
                                                loading={loading}
                                                columns={columns}
                                                dataSource={data}
                                                rowKey={columns.key}
                                                sticky
                                                pagination={{
                                                    current: curPage,
                                                    pageSize: pageSize,
                                                    total: total,
                                                    showTotal: total => `共${total}条`,
                                                    showQuickJumper: true,
                                                    showSizeChanger: true,
                                                    onChange: pageonChange,
                                                }}
                                            />
                                        </TabPane>
                                    )
                                })
                            }
                        </Tabs >
                    </Space>
                </Card>
            </PageContainer>
        </div>
    )
}

export default Activity
